<template>
  <div class="">
    <x-header class="header" :left-options="{backText: ''}">工程项目分析</x-header>
    <div class="content">
      <div class="pad">
        <chart :option="optionBar1" height="420px" loading="" theme="shine" width="100%"></chart>
      </div>
        <ul>
          <li v-for="(x,i) of items" :key="i" class="ub pad my-item" @click="handleToCity(x)">
            <i class="fa fa-superpowers ub uc"></i>
            <div class="title uf-1">{{x.name}}</div>
            <div class="value">N {{x.value}}</div>
            <div class="ub uc t-gray">
            <i class="fa fa-chevron-down"></i>
            </div>
          </li>
        </ul>
    </div>

    <popup-picker :data="list" :columns="1" v-model="value" :show="showPicker" show-name @on-hide="showPicker=false" @on-change="onChange"></popup-picker>
  </div>
</template>

<script>
import { XHeader, PopupPicker } from "vux";
import Chart from "@/components/Chart";
import { mapState } from 'vuex';
export default {
  data() {
    return {
      optionBar1: {},
      items: [],

      list: [],
      value: [],
      showPicker: false,
      comp_code: 0
    };
  },
  computed:{
    statusListData: state => state.project.project_status_list_data,
  },
  mounted() {
    this.$store.dispatch("project_status_list").then(resp => {
      wsCache.set('ProjectStatusList', resp, {exp : 60*60*24});
      // this.$store.commit("setProStatusListData", resp)
      this.items = resp.data;
      this.optionBar1 = {
        title: {
          text: "全区项目分布"
        },
        tooltip: {},
        legend: {
          data: ["数量"]
        },
        yAxis: {
          data: _.map(resp.data, item => item.name.substring(0, 2))
        },
        xAxis: {},
        itemStyle: {
          normal: {
            shadowBlur: 20,
            shadowColor: "rgba(0, 0, 0, 0.4)"
          }
        },
        series: [
          {
            name: "数量",
            type: "bar",
            data: resp.data
          }
        ]
      };
    });
  },
  methods: {
    handleToCity(item) {
      console.log(item);
      this.comp_code = item.code;
      this.showPicker = true;
      item.list1.forEach(n => {
        this.list.push({ name: `${n.name}(${n.value})`, value: n.code,parent:0 });
        _.sortByOrder(n.list1, ['code'], ['desc']).forEach(y=>{
          this.list.push({name: `${y.name}(${y.value})`,value:y.code,parent:n.code})
        })
      });
    },
    onChange(value) {
      console.log(value);

      this.$router.push({
        name: "ProjectList",
        params: {
          storecomp_code: this.comp_code,
          state: value[0],
          year: value[1]
        }
      });
    }
  },
  components: {
    XHeader,
    PopupPicker,
    Chart
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
li {
  .title {
    padding-left: 20px;
  }
  i {
    margin-left: 10px;
  }
}
</style>